<template>
  <div class="profile">
    <common-header></common-header>
    <div class="content">
      <div>
        <h1 class="name">{{ userInfo.username }}</h1>
        <router-link to="/password">修改密码</router-link>
      </div>
      <div class="time">加入时间： {{ userInfo.createdAt | fmttime }}</div>
      <Divider />
      <br />
      <br />
      <List header="我的地址" border>
        <ListItem v-for="item in address" :key="item.id">
          <ListItemMeta :title="item.name + '，' + item.phone" :description="item.place"></ListItemMeta>
          <template slot="action">
            <li>
              <a href="#" @click="del(item.id)">删除</a>
            </li>
            <li>
              <a href="#" @click="update(item)">编辑</a>
            </li>
          </template>
        </ListItem>
        <ListItem v-if="address.length === 0">
          暂无收货地址
        </ListItem>
      </List>
      <Divider />
      <div class="form-title">收货人<span style="color:red;">*</span></div>
      <input type="text" class="form-ipt" placeholder="输入收货人" v-model="add_address.name"/>
      <div class="form-title">联系方式<span style="color:red;">*</span></div>
      <input type="text" class="form-ipt" placeholder="输入联系方式" v-model="add_address.phone"/>
      <div class="form-title">收货地址<span style="color:red;">*</span></div>
      <input type="text" class="form-ipt" placeholder="输入收货地址" v-model="add_address.place"/>
      <button class="btn" @click="addAddress">保存为收货地址</button>
    </div>
    <Modal v-model="updateModal" title="修改地址" @on-ok="updateAddress" @on-cancel="cancel">
      <div class="form-title">收货人<span style="color:red;">*</span></div>
      <input type="text" class="form-ipt" placeholder="输入收货人" v-model="update_address.name"/>
      <div class="form-title">联系方式<span style="color:red;">*</span></div>
      <input type="text" class="form-ipt" placeholder="输入联系方式" v-model="update_address.phone"/>
      <div class="form-title">收货地址<span style="color:red;">*</span></div>
      <input type="text" class="form-ipt" placeholder="输入收货地址" v-model="update_address.place"/>
    </Modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      address: [],
      userInfo: {},
      up_id: 0,
      updateModal: false,
      add_address: {
        place: "",
        name: "",
        phone: ""
      },
      update_address: {
        place: "",
        name: "",
        phone: ""
      }
    };
  },
  mounted() {
    this.getProfile();
  },
  methods: {
    getProfile() {
      this.$api.auth.getProfile().then(data => {
        this.address = data.address;
        // this.order = data.order;
        this.userInfo = data.userInfo;
      });
    },
    del(id) {
      this.$api.address.del(id).then(data => {
        this.address = this.address.filter(ad => ad.id !== id);
        this.$toast.success("删除成功");
      });
    },
    update(item) {
      this.up_id = item.id;
      this.update_address = {
        ...item
      }
      this.updateModal = true;
    },
    updateAddress() {
      this.$api.address.update(this.up_id, this.update_address).then(data => {
        this.updateModal = false;
        this.$toast.success('修改成功');
        this.address = this.address.map(ad => {
          if (ad.id === this.up_id) {
            ad.place = this.update_address.place;
            ad.phone = this.update_address.phone;
            ad.name = this.update_address.name;
          }
          return ad;
        });
        this.up_id = 0;
        this.update_address = {
          place: "",
          name: "",
          phone: ""
        };
      });
    },
    cancel() {
      this.updateModal = false;
      this.updatePlace = "";
      this.up_id = 0;
    },
    goPay(id) {
      this.$router.push("/order?id=" + id);
    },
    addAddress() {
      if(this.add_address.name === '' || this.add_address.phone === '' || this.add_address.place === ''){
        this.$toast.info('请完善信息后提交！')
        return;
      }
      this.$api.address.add(this.add_address).then(data => {
        this.address.push(data);
        this.add_address = {
          place: "",
          name: "",
          phone: ""
        };
        this.$toast.success("添加成功");
      });
    },
  },
  filters: {
    orderStatus(val) {
      if (val === 2) {
        return "待发货";
      } else if (val === 3) {
        return "已发货";
      } else if (val === 4) {
        return "已收货";
      } else if (val === 1) {
        return "待付款";
      }
    },
    fmttime(val) {
      return moment(val).format("YYYY/M/DD HH:mm:ss");
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 30px 15%;
  padding: 20px 30px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  .name {
    font-size: 46px;
  }
}
</style>
